<template>
	<view>
		<pagehead></pagehead>
		<view class="head">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword" @search="searchs()"></u-search>
		</view>
		<view >
			<view :class="activeIndex == index ? 'mer-shop mer-shop-bg' : 'mer-shop'"  @tap="dd(index)" v-for="(item,index) in list">
				<view class="mer-shop-img fl">
					<a href="#">
						<image style="width: 90rpx; height: 90rpx;" :src="item.iamge"></image>
					</a>
				</view>
				<view class="mer-shop-js fl">
						<b><p style="color: #000000;">{{item.name}}</p></b>
					<view style="margin-top: 15rpx;">
						<p>{{item.msg}}</p>
					</view>
				</view>
				<view class="mer-left mer-shop-js fl">
					<text>15:07</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pagehead from '@/common/components/head/page-head.vue'
	export default {
		components: {
			pagehead
		},
		data() {
			return {
				keyword: '遥看瀑布挂前川',
				list: [{
					iamge: '/static/head.jfif',
					name: '张国荣',
					msg: '谈恋爱要从收到一束花和告白开始'
				},{
					iamge: '/static/head.jfif',
					name: '吴彦祖',
					msg: '爱得甜甜圈'
				},{
					iamge: '/static/head.jfif',
					name: '靓仔',
					msg: '超级无敌大帅哥'
				}]
			}
		},
		onLoad() {
	
		},
		methods: {
			searchs() {
				console.log(this.keyword)
			},dd(index) {
				this.activeIndex =index
				this.$u.toast('Hello 靓仔!');
			},init(data){
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #f8f9fa;
	}
	.mer-shop {
		width: 100%;
		height: 53px;
		margin-top: 10rpx;
		border-bottom: 1px solid #d7d7d7;
	}
	.mer-shop-bg {
		background-color: #e9ecef;
	}

	.mer-shop-img {
		width: 90rpx;
		height: 90rpx;
		margin-left: 30rpx;
		margin-top: 5rpx;

	}
	.fl {
		float: left;
	}
	p {
		font-size: .15rem;
		color: #666666;
		display: inline-block;
		vertical-align: middle;
	}
	
	h3 {
		font-size: .22rem;
		color: #333333;
		padding-bottom: 12rpx;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}
	.mer-shop-js {
		overflow: hidden;
		padding-left: 30rpx;
		width: 450rpx;
		padding-top: 0rpx;
	}
	.mer-shop-area {
		
	
	}
	.mer-left{
		width: 100rpx;
		height: 101rpx;
		font-size: 10rpx;
	}
</style>
